/* Fundamental elements */

body {
	display: none;  /* When the Javascript has finished tweaking things, it'll re-enable 'body' */
	}

:root {
    --default-back-color: #7fbc03; /* the original light green coloured background, suggested by Jonathan @Review Systems */
    --default-back-shadow-color: #7fbc0377; /* the shadow of the coloured background's round-edge (if no bitmap in use!) */
    --default-topbar-color: DarkGreen; /* #DE0120; */
    --default-front-color: white;
    --default-buttonback-color: #DE0120;
    --default-buttonfront-color: white;
    --default-buttonbackanim-color: orangered;
    --default-buttonfrontanim-color: yellow;
	--default-title-font: "Noto Sans";
	--default-text-font: "Noto Sans";
    --default-local-font: "PetitaMedium"; /* a local font to fall back to */
    --default-local-thinfont: "Roboto"; /* a local font to fall back to */
	--default-title-color: black;
	--topbar-height: 150px;
	--bigpic-height: 600px;
	--bigpic-height-bigger: 760px;
	--thetext-height: 250px;
/* houseplant care page stuff: */
	--topbarhousecare-height: 100px;
	--alltexthousecare-height: 1200px;
/*	--buttonthousecare-height: 250px;  no longer needed, button just comes after the  --alltexthousecare-height  section */
	/* if we ever do 1920-wide housecare, we shd use bigger fonts automagically eg use tricks like
		--sizedef: calc(0.25vw + 0.25vh);
		--text-size: calc(9pt + var(--sizedef)); */
	--width-mul: 1; /* scales headline fonts if less-than-full-width for text. Now set in the HTM, for each layout. (Saves "no CSS reload!" stress.) */
	--width2-mul: 1; /* as above, for normal text */
	--snow-height: 1220px;
    --hearts-width: 497px;
	--rect1920-picheight: 920px; /* if you change this, the heart animation values in the htm need changing too - calc() couldn't cut it!...
		and also, tweak --width-mul down so that eg the text on id=145 fits (there's no exact calc, it's margin-dependent etc) */
	--rect1920-textrecwidth: calc(1920px - var(--rect1920-picheight));
/*	--rect1920-stripheight: calc(1080px - var(--rect1920-picheight)); */
	--rect1920-bottomborderheight: 20px;
	--rect1920-strippos: calc(var(--rect1920-picheight) + var(--rect1920-bottomborderheight));
	--rect1920-stripheight: calc(1080px - (var(--rect1920-picheight) + (2 * var(--rect1920-bottomborderheight))));
	--rect1920-bottomborder2pos: calc(1080px - var(--rect1920-bottomborderheight));
    --default-bottomborder-color: darkgreen; /* for if we ever have little gradients down there. NB still left in the code! */
    --default-strip-color: white; /* Has to be white, as so many of my logos are unavoidably on a white background, alas (eg white ovals) 
	(but for lics who have a proper transparent logo, by all means chose an appropriate v.pale colour, in the data sheet */
/*    --default-strip-color: #FCFCF0;  btw this colour is done as a full-screen background, "behind everything"! Handy. Does strip-and-margins. */
	--default-insp-color: darkgreen;
}

/* html, body, #mainbodydiv, #mainbodydiv2col, .svgbackgnd, .svgbackgnd2 { /* last 3 no longer exist in that form(!) */
html, body {
    max-width: var(--screen-width);
    max-height: var(--screen-height);
    width: var(--screen-width);
    height: var(--screen-height);
    overflow: hidden;
    position: absolute;
    margin: 0;
    }

/* Universal fix so borders & padding are "inside the box" not outside, adding to its width */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit; /* doing it this way allows content-box or padding-box elsewhere in the CSS */
}

/*
html { /* nb this does not seem to work at the mo (in Chrome, at least).
    font-display: block; /* => wait up to 3s for fonts to load, before using a fall-back font (trying to avoid font-flash)
}
*/
button {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	border-radius: 120px;
	border: 10pt solid white;
	background-color: var(--default-buttonback-color);
	color: var(--default-buttonfront-color);
	margin: 11px 0 0 0;
	cursor: pointer;
	display: inline;
	height: 160px; 
	line-height: 100%;
	padding: 0 0.85em;
	font-family: 'Roboto', var(--default-local-thinfont), sans-serif; /* Roboto is now a local font too! So, whole site can work off our server */
	font-weight: 400;
	font-size: calc(50px * var(--width-mul));
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	letter-spacing: 0%;
	position: relative;
/* 	text-shadow: 1px 1px 1px #000022, -1px -1px 1px #aaaaff;  */
}
@keyframes blinkingBorder {
    0% {height: 160px;margin: 11px 0 0 0;background-color:var(--default-buttonback-color);color:var(--default-buttonfront-color);font-size: calc(50px * var(--width-mul));}
    70% {height: 160px;margin: 11px 0 0 0;background-color:var(--default-buttonback-color);color:var(--default-buttonfront-color);font-size: calc(50px * var(--width-mul));}
    75% {height: 190px;margin: 0 0 0 0;background-color: var(--default-buttonbackanim-color);color:var(--default-buttonfrontanim-color);font-size: calc(50px * 1.06 * var(--width-mul));}
    80% {height: 160px;margin: 11px 0 0 0;background-color:var(--default-buttonback-color);color:var(--default-buttonfront-color);font-size: calc(50px * var(--width-mul));}
    85% {height: 190px;margin: 0 0 0 0;background-color: var(--default-buttonbackanim-color);color:var(--default-buttonfrontanim-color);font-size: calc(50px * 1.06 * var(--width-mul));}
    90% {height: 160px;margin: 11px 0 0 0;background-color:var(--default-buttonback-color);color:var(--default-buttonfront-color);font-size: calc(50px * var(--width-mul));}
    100% {height: 160px;margin: 11px 0 0 0;background-color:var(--default-buttonback-color);color:var(--default-buttonfront-color);font-size: calc(50px * var(--width-mul));}
}


.blink {
    animation-name: blinkingBorder;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

.fadeitin {
/*	animation: fadeIn 0.1s; /* longer ones interfere with the snow animation */
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


button:active {
	background: #e5e5e5;
	-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
	-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
	box-shadow: inset 0px 0px 5px #c1c1c1;
	outline: none;
	text-align: center;
}

p {
	margin: 0 0 0 0;
	text-align: center;
/*	font-size: 15px; */
/*	text-shadow: 1px 1px 1px #aaa, -1px -1px 1px #aaa; */
/*	text-shadow: 1px 1px 1px #aaa; */
/*	line-height: 140%; */
}


/* Classes */


.fixdiv {
	display: block;
	overflow: hidden;
    text-align: center;
	width: var(--screen-column-width);
}

.rect1920_backgnd {
	display: block;
	overflow: hidden;
    text-align: center;
	position: absolute;
	left: var(--rect1920-picheight);
	width: var(--rect1920-textrecwidth);
	height: var(--rect1920-picheight);
}



.topbar {
	position: relative;
	top: 0px;
	margin: 0px 0px 0px 0px;
	max-height: var(--topbar-height);
	height: var(--topbar-height);
	background-color: var(--default-topbar-color);
	width: 100%;
/*	overflow: hidden; */
}

.nobackground {
	background-color: transparent;
}

/*
.ph1 {
	font-family: 'Handlee', sans-serif;
	font-size: 80px;
	padding: 20px 0px 0px 370px;
	max-height: 120px;
	display: inline-block;
	color: #ffffff;
}
.ph1loyal {
	font-family: 'Handlee', sans-serif;
	font-size: 80px;
	padding: 20px 0px 0px 0px;
	text-align: center;
	max-height: 120px;
	display: block;
	color: #ffffff;
}
*/

.topbar {display: flex;}

.ph1 {
    flex: 830;
	font-family: 'Handlee', Petita, sans-serif;
	font-size: 80px;
	padding: 30px 0px 0px 0px;
	max-height: 120px;
	text-align: center;
	color: #ffffff;
}
.picright {
    flex: 120;
	padding: 20px 15px 5px 0em;
	text-align: right;
	max-height: 110px;
/*	filter: drop-shadow(2px 2px 4px grey); */
}

.flex120 { /* not 120 to counter the Cap 'I' of 'Inspirations' looking uncentred */
    flex: 130;
}

.topcolr { /* on Houseplant screens, and maybe in future elsewhere, we use this colour in <span>s etc */
	color: var(--default-topbar-color);
	font-weight: bold;
}


/* some styles for the new (May2024) "big-photo" layout (set "Layout" field to 'smallpic' to make a post use the old one */

.bp_widthcal {
    width: 130px;
	padding: 20px 10px 0px 20px;
}
.bp_widthph1 {
    width: 410px;
	padding: 45px 0px 0px 10px;
}
.bp_widthlogo {
    width: 540px;
	padding: 20px 20px 20px 60px;
    text-align: right;
}
.bp_calleft {
	text-align: right;
	height: 100px;
	width: 90px;
}
.bp_ph1 {
	font-family: 'Handlee', Petita, sans-serif;
	font-size: 70px;
	max-height: 120px;
	text-align: left;
	color: #ffffff;
}
.bp_logopic {
/*	max-height: 120px; */
}
.bp_picright {
/*	text-align: right;
	padding: 0px 30px 0px 30px;
	max-height: 120px; */
}

.img_grow {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

.img_vertcent_horizright{
    display: flex;
    align-items: center;
    justify-content: right;
}


/* here are some styles for Houseplant Care pages */

.mainbodyhouse {
    font-family: var(--default-text-font), var(--default-local-font), sans-serif;
	font-weight: 400; /* ="normal" - should happen by default anyway */
}
.topbarhousecare {
	position: relative;
	margin: 0px;
	max-height: var(--topbarhousecare-height);
	height: var(--topbarhousecare-height);
	background-color: var(--default-topbar-color);
	width: 100%;
	padding: 20px 0px 0px 0px;
	text-align: center;
/*	overflow: hidden; */
}
.ph1house {
	font-family: 'Handlee', Petita, sans-serif;
	font-size: 50px;
	font-weight: bold;
	padding: 10px 0px 0px 0px;
	text-align: center;
	color: #ffffff;
}
.alltexthousecare {
	height: var(--alltexthousecare-height);
	font-size: 40px; /* for general text paragraphs */
}
.housecaretitle {
	margin: 50px 0px 0px 0px;
	font-size: 75px;
	font-weight: bold;
    height: 120px; /* fixed-height and good top-margin lets you play around with font-size a bit */
}
.houseintro {
	font-size: 50px;
	padding: 0px 0px 0px 0px;
}
.mainhousecare {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	background-color: transparent; /* usually/often overwritten */
	border-radius: 2px; /* some licensees might like this whole section to be a more rounded-looking box? */
/* these removed the main bit from the overall flow, isolating the title etc - just too much::
	border-top: 10px solid var(--default-topbar-color);
	border-bottom: 10px solid var(--default-topbar-color); */
	padding: 20px 40px 20px 40px;
}
.minorhousecare {
	margin: 20px 0px 0px 0px;
	padding: 20px 40px 20px 40px;
}
/* .buttonhousecare {
	position: absolute;
	top: 1460px;
	left: 0px;
	height: var(--buttonthousecare-height);
} */
.houseintro, .doit, .hbody {
	margin: 10px 0px 10px 0px;
}
.doit {
	font-weight: bold;
	text-align: left;
}
.hbody {
	text-align: left;
	padding-left: 40px;
}
.spaced {
	margin: 10px 0px 10px 0px;
}
.flex-container { /* on fixed kiosk 1080-wide no wrapping occurs - but, nice to get   justify-content: space-around;   */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	padding: 0;
	margin: 10px 0px 10px 0px;
}
.imgflex {
	width: 100%;
}
/* .flowup {
	overflow-y: scroll;
	margin-top: -50px;
} */
.normleft, .normright {
/*	font-weight: 400; */
	vertical-align: center;
}
.normleft {
	text-align: right;
}
.normright {
	text-align: left;
}
/* this doesn't work for normleft/normright alas
.vcentered {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
} */
.splittxt {
	width: 50%;
}
.splittxt55 {
	width: 55%;
}
.splittxt60 {
	width: 60%;
}
.splittxt65 {
	width: 60%;
}
.splittxt70 {
	width: 70%;
}
.splitpic {
	width: 40%;
}
.splitpic25 {
	width: 25%;
}
.splitpic30 {
	width: 30%;
}
.splitpic35 {
	width: 35%;
}
/* Small screens */
@media all and (max-width: 500px) {
.splitpic, .splittxt, .splitpic30, .splittxt60, {
	width: 90%;
}
}


/* END of Houseplant Care page styles */



.ph2 {
    display: table;
    font-family: var(--default-title-font), var(--default-local-font), sans-serif;
	font-weight: 900; /* (800= "extra-bold", 900="black" (postery!), and no wider (or only slightly) than eg 700(bold).) Set the font-load in the HTML for the weights that the font has and that you want */
	font-size: 70pt;
    margin: 0px auto 0px auto;
/*    padding: 10px 50px 20px 50px;  set in the HTML, varies according to screen width */
    text-align: center;
/*	color: var(--default-title-color); set in styles in the htm */
/*	margin: 0 0 0 0;*/
	line-height: 115%;
/*	vertical-align: middle;
	width: 95%;*/
/*	box-shadow: rgb(38, 57, 77) 0px 20px 20px -20px; (this one's a kind of underline only) */
/*	text-shadow: 1px 1px 1px #000022, -1px -1px 1px #aaaaff; */
/* 	text-shadow: -1px -1px 1px #aaaaff;  this subtlely protects against the snow, from the NorthWest! But =bad if on a plain backgnd */
/*	clear: both; */
	letter-spacing: 0px;
}

/* the previous, too-wide version
.ph2 {
    font-family: var(--default-title-font);
	font-weight: 900;
	font-size: 70pt;
	margin: 0 0 0 0;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0px;
	vertical-align: middle;
	line-height: 120%;
	width: 95%;
	text-shadow: -1px -1px 1px #aaaaff;
	clear: both;
	letter-spacing: 0px;
} */

@keyframes scale {
  100% {
    transform: scale(1);
  }
}

.spanfadein {
  display: inline;
  opacity: 0;
  filter: blur(4px);
}

.spanfadein1 {
  animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.spanfadein2 {
  animation: fade-in 0.8s 1.0s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.spanfadein3 {
  animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.spanfadein4 {
  animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.spanfadein5 {
  animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.spanfadein6 {
  animation: fade-in 0.8s 2.0s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.spanfadein7 {
  animation: fade-in 0.8s 2.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.spanfadein8 {
  animation: fade-in 0.8s 2.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.spanfadein9 {
  animation: fade-in 0.8s 2.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.spanfadein10 {
  animation: fade-in 0.8s 2.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.spanfadein11 {
  animation: fade-in 0.8s 2.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.spanfadein12 {
  animation: fade-in 0.8s 2.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.spanfadein13 {
  animation: fade-in 0.8s 2.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.spanfadein14 {
  animation: fade-in 0.8s 2.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.spanfadein15 {
  animation: fade-in 0.8s 2.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.spanfadein16 {
  animation: fade-in 0.8s 3.0s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.bigphoto {
	text-shadow: none;
	margin: 0em 0 0 0;
	margin-left: auto;
	margin-right: auto;
}

.roundimg {
/*	width: 550px;
	height: 550px; */
	width: calc(var(--bigpic-height) - 50px);
	height: calc(var(--bigpic-height) - 50px);
	border-radius: 50%;
/*	border: 10px outset silver; */
	border: 10px solid white;
    box-shadow: 0 20px 10px -10px #374681;
}

.roundimgbig { /* only difference is the size of this */
	width: calc(var(--bigpic-height-bigger) - 50px);
	height: calc(var(--bigpic-height-bigger) - 50px);
	border-radius: 50%;
/*	border: 10px outset silver; */
	border: 10px solid white;
    box-shadow: 0 20px 10px -10px #374681;
}

.squareimgrotated {
	width: 450px;
	height: 450px;
    margin-top: 60px;
	border-radius: 0%;
	border: 5px outset white;
    box-shadow: 5px 10px 5px 0px #374681;
    transform: rotate(-10deg);
}

.midtext, .robotomidtext, .robotomidtext2 {
	margin: 0px 0 0 0;
	padding: 0 10px 0 10px;
	text-align: center;
    transform: scale(0.94);
    animation: scale 2s forwards cubic-bezier(0.5, 1, 0.89, 1);
	letter-spacing: 1px;
	line-height: 125%;
/*	color: var(--default-text-color); set in styles in the htm */
}

.midtext {
    font-family: var(--default-text-font), var(--default-local-font), sans-serif;
	font-weight: 400; /* ="normal" - should happen by default anyway */
	font-size: calc(var(--width2-mul)*60px);
}
/* 'robotomidtext' is so far only for 'rectpic1920' layout, where text has two lines and linebreaks, so wider/larger fonts are fine */
.robotomidtext, .robotomidtext2 {
/*	font-family: 'Roboto', var(--default-local-thinfont), sans-serif; */
    font-family: var(--default-text-font), 'Roboto', var(--default-local-font), sans-serif;
	font-weight: 400;
	font-size: 42px;
}

/* A slightly bigger version, for the 'port1920' layout, tho not so big that it overwhelms the item text above it */
.robotomidtext2 {
	font-size: 54px;
}

.askstaff1 {
	font-style: italic;
}
.askstaff2 { /* usually no css here, it's just 'normal' text */
}
.askstaff3 {
	color: #ffc840; /* lics may change this, the "stand-out" colour in the final 'robotomidtext' text item */
}
.askstaff4 { /* the 'port1920' layout, text might be black or white (say) on dark or light backgrounds, so, can't say "orange": try "bolder"! */
	font-weight: 700;
}

.centered {
	text-align: center;
}

.pcentered {
    padding: 10px 0px 0px 0px;
    margin: 0 auto;
}
.nomargin {
    margin: 0;
}

.whitetxt {
    color: #fff;
}

/* replaced by a new 'picright' above, using flex --
.pararight {
	display: inline;
    float: right;
	text-align: right;
	max-height: 110px;
}

.picright {
	margin: 15px 15px 0em 0em;
	display: inline;
	text-align: right;
	max-height: 110px;
	filter: drop-shadow(2px 2px 4px grey);
} */

.picmiddle {
	text-align: center;
	max-height: 150px;
}

.colorbackground {
	background-color: #bb2222;
}
.testbackground {
	background-color: #22bb22;
}
.logopic {
	clear: both;
	max-height: 50px;
}

.vertcenter { /* vertically centre paragraph in a div - if div has a fixed height */
	display: flex;
	align-items:center;
	justify-content:center;
}

.hrtoprule {display: hidden;} /* not yet used - was going to be a <hr>across the screen */

.z2{
    position: relative;
    z-index: 2;
}

.z1 {
    position: relative;
    z-index: 1;
}

.z0 {
    position: relative;
    z-index: 0;
}

.zm1 {
    position: relative;
    z-index: -1;
}

.zm1abs {
    position: absolute;
    z-index: -1;
}

.zm2 {
    position: relative;
    z-index: -2;
}


svg {
  transform-origin: 0 0;
}

.svgbackcolr {
    fill: var(--default-back-color);
    filter: drop-shadow(10px 8px 10px var(--default-back-shadow-color));
}

.svgbacknoshadow {
    fill: var(--default-back-color);
}

.svgbackbackcolr { /* this is the "white background" behind/below our curvy (eg green) background. */
    fill: white;
}

/* ==== here's the original snow animation, renamed to 'snowgood', with *three* not two sets of snow: looked fine, v.slightly beetter, but can get jumpy on lesser hardware (it even looked a bit jumpy on an old desktop (powerful for 2008!)*/

@keyframes snowgood {
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    100% {
/*        background-position: 500px 500px, 400px 800px, 300px 900px; */
/*        background-position: 100px 500px, 200px 700px, 300px 900px; */
        background-position: 100px 600px, 200px 800px, 300px 900px;
    }
}
.snowgood {
    background-image: url('./snowblur100slowsmall.png'), url('./snowblur200.png'), url('./snowblur300fastbig.png');
    animation: snow 4s linear infinite;
    position: absolute;
/*    height: 100%;
    width: 100%; */
    height: var(--snow-height);
    width: var(--screen-width);
/*    filter: blur(1px); I've blurred the snowflake images already */
}

/* ==== here's the current two-image snow animation */

@keyframes snow {
    0% { background-position: 0px 0px, 0px 0px}
    100% {
/*        background-position: 500px 500px, 400px 800px, 300px 900px; */
/*        background-position: 100px 500px, 200px 700px, 300px 900px; */
        background-position: 200px 800px, 300px 900px;
    }
}
.snow {
    background-image: url('./snowblur200.png'), url('./snowblur300fastbig.png');
    animation: snow 4s linear infinite;
    position: absolute;
/*    height: 100%;
    width: 100%; */
    height: var(--snow-height);
    width: var(--screen-width);
/*    filter: blur(1px); I've blurred the snowflake images already */
}

@keyframes woman1 {
    0% {
    background-position: var(--anim-woman1-xpos0) var(--anim-woman1-ypos0);
    transform: scale(0.0);
    opacity: 0;}
    50% {
    opacity: 0.5;}
    100% {
    background-position: var(--anim-woman1-xpos100) var(--anim-woman1-ypos100);
    transform: scale(var(--anim-woman1-finalscale));
    opacity: 0;}
}
.woman1 {
    background-image: url('./woman1 wires.png'); 
    background-repeat: no-repeat;
    animation: woman1 20s linear 0s infinite;
    position: absolute;
    height: 1220px;
    width: var(--screen-column-width);
}

@keyframes hearts { /* currently only *one* heart, but we'll see... */
    0% {
    transform: translateX(calc(var(--anim-hearts-xpos0)/1)) translateY(var(--anim-hearts-ypos)) scale(0.0);
    opacity: 0.5;}
    50% {
    transform: translateX(calc(var(--anim-hearts-xpos0)/2)) translateY(var(--anim-hearts-ypos)) scale(calc(var(--anim-hearts-scale100)/994));
    opacity: 1.0;}
    75% {
    transform: translateX(calc(var(--anim-hearts-xpos0)/4)) translateY(var(--anim-hearts-ypos)) scale(calc(var(--anim-hearts-scale100)/663));
    opacity: 1.0;} /* note the opacity here */
    100% {
    transform: translateX(0px) translateY(var(--anim-hearts-ypos)) scale(calc(var(--anim-hearts-scale100)/497));
    opacity: 0;}
}

@keyframes heartsRect1920 { /* THE NESTED CALCS WERE TOO MUCH FOR TranslateX, IN Rect1920. So instead, a new 'heartsRect1920' animation: */
/* Opacities were 0.5, 1, 0.75, 0 - I've made more transparent as they go over *text* in this view */
    0% {
    transform: translateX(var(--anim-hearts-xpos-0)) translateY(var(--anim-hearts-ypos)) scale(0.0);
    opacity: 0.1;}
    50% {
    transform: translateX(var(--anim-hearts-xpos-50)) translateY(var(--anim-hearts-ypos)) scale(calc(var(--anim-hearts-scale100)/994));
    opacity: 0.25;}
    75% {
    transform: translateX(var(--anim-hearts-xpos-75))) translateY(var(--anim-hearts-ypos)) scale(calc(var(--anim-hearts-scale100)/663));
    opacity: 1.0;} /* note the opacity here */
    100% {
    transform: translateX(var(--anim-hearts-xpos-100)) translateY(var(--anim-hearts-ypos)) scale(calc(var(--anim-hearts-scale100)/497));
    opacity: 0;}
}
.hearts, .heartspink, .heartswhite, .heartstruejoy {
    transform-origin: bottom left;
    opacity: 0;
    animation: hearts 10s linear 0s infinite;
    position: absolute;
}

/* new styles & animations, for the 'pos' layout */

/*
			.svgbacknoshadow {
//				fill: var(--default-back-color);  perhaps, on some browsers SVG takes exception to a "var" being involved, and ignores it?
				fill: #7fbc03;
			}
// actually even the simple 'fill' version of this "svgbacknoshadow" class was failing on Win7-Chrome. So, we use inline style instead.
*/

.svgbacknoshadow {
    fill: #7fbc03;
}

.rect1920_ph1 {
	font-family: 'Handlee', Petita, sans-serif;
	font-size: 60px;
/*	max-height: 80px; */
}


.pos_ph1 {
	font-family: 'Handlee', Petita, sans-serif;
	font-size: 40px;
	max-height: 60px;
}

.pos_ph1920 {
	font-family: 'Handlee', Petita, sans-serif;
	font-size: 60px;
	max-height: 100px;
}

.pos_fixdiv {
	display: block;
	overflow: hidden;
    text-align: center;
}

.pos_wire, .pos_wire1920 {
    fill: none;
    stroke: white;
    stroke-width: 6px;
    animation: pos_wiremove 1s linear 1;     
    animation-fill-mode: forwards;
}
.pos_wire {
    stroke-dasharray: 5440px;
    stroke-dashoffset: 5440px;
}
.pos_wire1920 {
    stroke-dasharray: 5840px;
    stroke-dashoffset: 5840px;
}
@keyframes pos_wiremove {
    100% {
        stroke-dashoffset: 0;
    }
}

.pos_pic {
    animation: pos_piczoom 8s ease 0s 1 forwards; /* Reminder: "forwards" = 'animation-fill-mode’ => stay at the final state */
}
@keyframes pos_piczoom {
    0% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1.15, 1.15);
    }
}

.ph2anim {
    animation: pos_ph2animzoom 2s ease-out 0s 1 forwards;
}
.pos_ph2anim {
    animation: pos_ph2animzoom 2s ease-out 0s 1 forwards;
}
@keyframes pos_ph2animzoom {
    0% {
        opacity: 0;
        transform: scale(0.9, 0.9);
    }
    10% {
        opacity: 0;
        transform: scale(0.91, 0.91);
    }
    20% {
        opacity: 1;
        transform: scale(0.92, 0.92);
    }
    100% {
        opacity: 1;
        transform: scale(1.0, 1.0);
    }
}

.wiresparkle {
  animation: wiresparkle 1.5s linear 0s 1 forwards;
}

.wiresparklestar {
    font-size: 500%;
    color: white;
}

@keyframes wiresparkle {
  0%   {
    transform: scale(0);
    opacity: 0;
  }
  80%   {
    transform: scale(0);
    opacity: 0;
  }
  85%   {
    transform: scale(0.3);
    opacity: 0.3;
  }
  90%   {
    transform: scale(1);
    opacity: 1;
  }
  95%   {
    transform: scale(0.3);
    opacity: 0.3;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* not yet used, see 'wiresparkle' above */
.sparkle {
  animation: sparkle 0.5s linear 4s 1;
  content: "✧"; /* check which font this defaults to */
}

@keyframes sparkle {
  0%   {
    transform: scale(0);
    opacity: 0;
  }
  50%   {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}